<script>
	export default {
		data() {
			return {
				timer: null,
				time: 60,
				isRead: false,
				maskIsShow: true,
				shiyong: false,
				yinsi: false,
				formData: {
					mobile: "",
					code: ""
				}
			}
		},
		onLoad() {

		},
		computed: {
			basicData() {
				return this.$store.state.basicData
			}
		},
		methods: {
			async sendCode() {
				if (!this.formData.mobile) {
					return this.toast("请输入手机号")
				}
				if(this.time==60){
					const res = await this.http("post", "/api/index/sms_code", {
						mobile: this.formData.mobile
					})
					if (res.code == 200) {
						this.startTimer()
						this.timer = setInterval(this.startTimer, 1000)
					}
					this.toast(res.message)
				}
			},
			startTimer() {
				this.time--;
				if (this.time <= 0) {
					this.time = 60
					clearInterval(this.timer)
				}
			},
			async phoneNumberLogin() {
				if (!this.isRead) {
					return this.toast("请阅读协议并勾选同意")
				}
				if (!this.formData.mobile) {
					return this.toast("请输入手机号")
				}
				if (!this.formData.code) {
					return this.toast("请输入验证码")
				}
				const res = await this.http("post", "/api/index/login", this.formData)

				if (res.code == 200) {
					for (var key in res.data.user) {
						if (res.data.user.hasOwnProperty(key)) {
							uni.setStorageSync(key, res.data.user[key])
						}
					}
					setTimeout(() => {
						uni.redirectTo({
							url: "/pages/index/index"
						})
					}, 1500)
				}
				this.toast(res.message)
			},
			wechatLogin() {
				if (!this.isRead) {
					return this.toast("请阅读协议并勾选同意")
				}
				uni.showLoading({
					title: "正在授权",
					mask: true
				})
				uni.login({
					provider: "weixin",
					success: async e => {
						const res = await this.http("post", "/api/index/getOpenid", {
							code: e.code
						})
						const {
							openid,
							session_key,
							unionid
						} = res.data;
						if (!openid) {
							uni.showToast({
								title: "微信授权登录失败",
								icon: "none"
							})
							return
						}
						this.wechatLoginSubmit(openid)
					}
				})
			},
			quxiao(){
				uni.login({
					provider: "weixin",
					success: async e => {
						const res = await this.http("post", "/api/index/getOpenid", {
							code: e.code
						})
						const {
							openid,
							session_key,
							unionid
						} = res.data;
						if (openid) {
							this.wechatLoginSubmit2(openid)
						}
					}
				})
				setTimeout(function(){
					uni.redirectTo({
						url: "/pages/index/index"
					})
				},3000)
			},
			async wechatLoginSubmit(openid) {
				const res = await this.http("post", "/api/index/wx_login", {
					openid
				})
				uni.hideLoading()
				if (res.code != 200) {
					uni.showToast({
						icon: "none",
						title: "用户尚未注册"
					})
				}
				for (var key in res.data.user) {
					if (res.data.user.hasOwnProperty(key)) {
						uni.setStorageSync(key, res.data.user[key])
					}
				}
				uni.redirectTo({
					url: "/pages/index/index"
				})
			},
			async wechatLoginSubmit2(openid) {
				const res = await this.http("post", "/api/index/wx_login", {
					openid
				})
				uni.hideLoading()
				if (res.code != 200) {
					setTimeout(function(){
						uni.redirectTo({
							url: "/pages/index/index"
						})
					},1000)
				}else{
					for (var key in res.data.user) {
						if (res.data.user.hasOwnProperty(key)) {
							uni.setStorageSync(key, res.data.user[key])
						}
					}
					setTimeout(function(){
						uni.redirectTo({
							url: "/pages/index/index"
						})
					},1000)
				}
			},
			privacy(id){
				uni.navigateTo({
					url:'/pages/my/privacy?id='+id
				})
			}
		}
	}
</script>
<template>
	<view class="p-20 login-container flex flex-col between">
		<div>
			<div class="login-banner">

				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="item in basicData.login_banner">
						<image :src="item.logo" mode="aspectFill" class="w-full rounded-10" style="height: 232rpx;">
						</image>
					</swiper-item>
				</swiper>

			</div>
			<div class="b fz36 text-orange mt-40 mb-30 font-bold">欢迎使用泊车充电！！！</div>
			<input type="number" maxlength="11" v-model="formData.mobile" placeholder-style="color:#BCBCBC"
				class="border-gray-9 h-80 rounded-16 pl-40" placeholder="请输入您的手机号">
			<div class="between mt-40 mb-20">
				<input type="number" v-model="formData.code" placeholder-style="color:#BCBCBC"
					class="h-80 border-gray-9 rounded-16 flex-1 text-center" placeholder="请输验证码">
				<div class="w-40"></div>
				<div @click="sendCode" class="text-blue h-80 center border-blue rounded-16 flex-1 font-bold">
					<text v-if="time<0">点击获取验证码</text>
					<text v-if="time>=0">{{time==60?"点击获取验证码":time+"秒后重试"}}</text>
				</div>
			</div>
			<div class="text-blue h-80 center border-blue rounded-16 flex-1 font-bold" @click="phoneNumberLogin">确认登录
			</div>
		</div>

		<div class="mask" v-show="maskIsShow">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" style="width: 80%;height: 500px;">
				<swiper-item v-for="item in basicData.index_pop" style="text-align: center;">
					<image :src="item.logo" mode="widthFix" class="w-full rounded-10"  @click="privacy(item.id)">
					</image>
					<image  @click="maskIsShow=false" src="/static/cha.png"  class="rounded-10"  style="width: 50px;height: 50px;text-align: center; margin: auto;">
					</image>
				</swiper-item>
			</swiper>
		</div>

		<div class="mask" v-show="shiyong" style="align-items: flex-end;">
			<div class="w-full p-30 bg-white" style="max-height: 80vh; overflow:auto">
				<div>
					<div class="center fz30 font-bold">
						{{basicData.privacy.title}}
					</div>
					<div class="mt-30" v-html="basicData.privacy.content"></div>
				</div>
				<button class="mt-50" @click="shiyong=false">关闭</button>
			</div>
		</div>

		<div class="mask" v-show="yinsi" style="align-items: flex-end;">
			<div class="w-full p-30 bg-white" style="max-height: 80vh; overflow:auto">
				<div>
					<div class="center fz30 font-bold">
						{{basicData.agreement.title}}
					</div>
					<div class="mt-30" v-html="basicData.agreement.content"></div>
				</div>
				<button class="mt-50" @click="yinsi=false">关闭</button>
			</div>
		</div>


		<div style="margin-top: 30rpx;">
			<navigator url="/pages/start/register">
				<div class="text-orange fz40 center mb-50">
					<image src="/static/icon/register.png" mode="widthFix" class="w-50 mr-10"></image>
					新用户注册
				</div>
			</navigator>
			<div class="text-green fz40 center mb-30" @click="wechatLogin">
				<image src="/static/icon/wechat.png" mode="widthFix" class="w-70 mr-10"></image>
				微信授权登录
			</div>
			
			<div class="text-gray-900 fz28 center mb-50" @click="quxiao">
				取消
			</div>
		</div>

		<div>
			<div class="text text-gray-900 fz30 between items-start">
				<radio :checked="isRead" @click="isRead=!isRead" class="mr-15" />
				<div class="div">
					我已阅读并同意 <text class="text-blue" @click="shiyong=true">《泊车充电用户使用协议》</text>
					和
					<text class="text-blue" @click="yinsi=true">《泊车充电隐私政策》</text> ，
					未注册的手机号在登录后将自动为您创建账号。
				</div>
			</div>
			<image src="/static/pic/login-car.png" mode="widthFix" class="w-full" style="opacity: 0.2;"></image>
		</div>
	</view>
</template>


<style>
	page {
		height: 100%;
	}

	.login-container {
		height: 100%;
		align-items: stretch;
	}

	.mask {
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}
</style>